<template>

	<view class="balance">
		<view class="navs" :style="{'padding-top':(statusBarTop)+'px'}">
			<uni-icons type="arrowleft" size="24" color="#ffffff" @click="goBack"></uni-icons>
			<text>我的余额</text>
		</view>
		<view class="totals">
			<view class="total_title" @click="changeEye">
				<text>总余额(元)</text>
				<image class="eye_icon" v-if="eyeshow" :src="IMGLink+'/my/eye_show.png'"></image>
				<image class="eye_icon" v-else :src="IMGLink+'/my/eye_hide.png'"></image>
			</view>
			<view class="eye-hide" v-if="!eyeshow">
				***
			</view>
			<view class="eye-hide eye-show" v-else>
				￥<text>{{userinfo.user_account}}</text>
			</view>
			<view class="btns">
				<button class="deposit-btn" size="mini" plain="true"
					@click="goPage('/pagesA/my/account/withdraw?type=1')">提现</button>
				<button class="recharge-btn" size="mini" plain="true"
					@click="goPage('/pagesA/my/account/charge')">充值</button>
			</view>
		</view>
		<view class="others">
			<uni-list>
				<uni-list-item title="余额明细" showArrow to="/pagesA/my/account/balancelist"></uni-list-item>
				<uni-list-item title="余额使用规则" showArrow to='/pagesA/my/rules/ruleDetail?type=2'></uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script>
	import {
		coins
	} from "@/api/my/my.js";
	import copyFunc from "@/utils/userCommon.js";
	export default {
		data() {
			return {
				IMGLink: this.IMGLink,
				eyeshow: false,
				statusBarHeight: 0,
				statusBarTop: 0,
				userinfo: {}, //用户信息
			}
		},
		onLoad() {
			// 只在微信小程序内获取改数据
			//#ifdef MP-WEIXIN	
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.statusBarHeight = menuButtonInfo.height;
			this.statusBarTop = menuButtonInfo.top;
			//#endif

		},
		onShow() {
			this.getData();
		},
		methods: {
			// 获取账户信息
			getData() {
				coins('userinfo', {}).then(res => {
					this.userinfo = res.data.user_info;
				}).catch(error => {})
			},
			// 返回上一页
			goBack() {
				copyFunc.goBack();
			},
			changeEye() {
				this.eyeshow = !this.eyeshow;
			},
			goPage(url) {
				uni.navigateTo({
					url: url,
				});
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #F0F1F2;
	}
</style>
<style lang="scss" scoped>
	@import "../my.scss";

	.balance {
		box-sizing: border-box;
		height: 465rpx;
		@include bck_img($img-link+'/my/balance-bg.png');
		color: #FFFFFF;
	}

	.navs {
		width: 58%;
		@include flexLayout(center, space-between);
	}

	// #ifdef H5
	.navs {
		padding-top: 44rpx !important;
	}

	// #endif
	/deep/ .uni-navbar__header,
	/deep/ .uni-navbar__content,
	/deep/ .uni-icons,
	/deep/ .uni-nav-bar-text {
		background-color: transparent !important;
		color: #FFFFFF !important;
	}

	/deep/ .uni-navbar--border {
		border-bottom-color: transparent !important;
	}

	.totals {
		@include cards;
		background: #FFFFFF;
		text-align: center;
		margin-top: 30rpx;
		padding: 40rpx 30rpx 44rpx;

		.total_title {
			color: #181818;
			font-size: 26rpx;
			margin-left: 40rpx;

			.eye_icon {
				width: 32rpx;
				height: 22rpx;
				margin-left: 16rpx;
				margin-bottom: -2rpx;
			}
		}

		.eye-hide {
			height: 200rpx;
			line-height: 200rpx;
			color: #F54642;
			font-size: 44rpx;
			font-weight: bold;
		}

		.eye-show {
			text {
				font-size: 70rpx;
			}
		}

		.btns {
			button {
				width: 282rpx;
				height: 84rpx;
				line-height: 84rpx;
				border-radius: 42rpx;
			}

			.deposit-btn {
				color: #EE5230;
				border-color: #EE5230;
			}

			.recharge-btn {
				background: linear-gradient(360deg, #EE4629 0%, #EE653A 100%);
				color: #FFFFFF;
				border-color: transparent;
				margin-left: 40rpx;
			}
		}
	}

	.others {
		@include cards;
		padding: 0 20rpx;
		background: #FFFFFF;
		margin-top: 20rpx;

		/deep/ .uni-icons {
			color: #D8D8D8 !important;
		}

		/deep/ .uni-list--border-top,
		/deep/ .uni-list--border-bottom {
			background-color: transparent;
		}

		/deep/ .uni-list-item__container {
			padding-left: 10rpx;
		}

		/deep/ .uni-icon-wrapper {
			padding: 0;
		}

		/deep/ .uni-list-item__content-title {
			color: #181818;
		}
	}
</style>
